<template>
  <div class="app-container">
    <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery">
      <el-col :span="6">
        <el-form-item label="车辆归属:">
          <el-input v-model="queryParams.carAffiliationVal" clearable placeholder="请输入" maxlength="30"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="客户名称:">
          <el-input v-model="queryParams.earnCustomerName" clearable placeholder="请输入" maxlength="30"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="额度申请编号:">
          <el-input v-model="queryParams.calcSchemeCode" clearable placeholder="请输入" maxlength="30"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="订单编号:">
          <el-input v-model="queryParams.orderCarCode" clearable placeholder="请输入" maxlength="30"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="业务类型:">
          <el-select v-model="queryParams.sourceBusinessType" clearable>
            <template v-for="dict in dict.type.business_type">
              <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="车牌号:">
          <el-input v-model="queryParams.carPlateNo" clearable placeholder="请输入" maxlength="30"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="预警状态:">
          <el-select v-model="queryParams.warningStatus" clearable>
            <template v-for="dict in dict.type.collection_alert_status">
              <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="预警生成时间:">
          <el-date-picker v-model="foreWarningTime" type="daterange" value-format="yyyy-MM-dd" format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="客户等级:">
          <el-select v-model="queryParams.customerLevel" clearable>
            <template v-for="dict in dict.type.customer_level">
              <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="客户来源:">
          <el-select v-model="queryParams.customerSource" clearable>
            <template v-for="dict in dict.type.customer_source">
              <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-col>
    </SearchContent>

    <div class="card-wrap card-padding">
      <div class="table-title-wrap justify-end">
        <el-button type="primary" :disabled="multipleSelection.length === 0" size="mini" @click="initiateCollection" v-hasPermi="['collectionModule:collectionWarning:initiateCollection']">发起催收</el-button>
        <el-button type="primary" size="mini" @click="warningConfiguration" v-hasPermi="['collectionModule:collectionWarning:warningConfiguration']">催收预警配置</el-button>
      </div>

      <table-page
        ref="el-table"
        rowKey="id"
        :isSelect="false"
        @selectionChange="handleSelectionChange"
        @selection-change="handleSelectionChange"
        :loading="loading"
        :dataList="dataList"
        border
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @setSizeCurrent="getList"
      >
        <!-- 操作插槽 -->
        <template slot="tableColAc">
          <el-table-column type="selection" :selectable="(row) => row.warningStatus == 0" :reserve-selection="true" width="55" align="center" fixed />
          <el-table-column label="操作" width="150" align="center" class-name="small-padding fixed-width" fixed>
            <template slot-scope="scope">
              <el-button v-if="scope.row.warningStatus == 1" v-hasPermi="['collectionModule:collectionWarning:warningConfigurationView']" type="text" @click="initiateCollectionView(scope.row)">查看催收详情</el-button>
            </template>
          </el-table-column>
        </template>
        <!-- 普通列插槽 -->
        <template slot="tableCol">
          <el-table-column label="预警状态" align="center" prop="warningStatus" fixed>
            <template slot-scope="scope">
              <dict-tag :options="dict.type.collection_alert_status" :value="scope.row.warningStatus" />
            </template>
          </el-table-column>
          <el-table-column label="车辆归属" align="center" prop="carAffiliationVal" min-width="100px" show-overflow-tooltip />
          <el-table-column label="客户名称" align="center" prop="earnCustomerName" min-width="100px" show-overflow-tooltip />
          <el-table-column label="客户等级" align="center" prop="customerLevel">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.customer_level" :value="scope.row.customerLevel" />
            </template>
          </el-table-column>
          <el-table-column label="客户来源" align="center" prop="customerSource">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.customer_source" :value="scope.row.customerSource" />
            </template>
          </el-table-column>
          <el-table-column label="额度申请编号" align="center" prop="calcSchemeCode" min-width="200px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span @click="goToDetail(scope.row.calcSchemeId, scope.row.processId)" style="color: #1890ff; cursor: pointer">{{ scope.row.calcSchemeCode }}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单编号" align="center" prop="orderCarCode" min-width="200px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span @click="orderDetail(scope.row)" style="color: #1890ff; cursor: pointer">{{ scope.row.orderCarCode }}</span>
            </template>
          </el-table-column>
          <el-table-column label="业务类型" align="center" prop="sourceBusinessType">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.business_type" :value="scope.row.sourceBusinessType" />
            </template>
          </el-table-column>
          <el-table-column label="订单提交人" align="center" prop="orderSubmitter" min-width="100px" show-overflow-tooltip />
          <el-table-column label="品牌/车型/车款" align="center" prop="carInFo" min-width="300px" show-overflow-tooltip />
          <el-table-column label="车牌号" align="center" prop="carPlateNo" />
          <el-table-column label="车架号" align="center" prop="carVinNo" min-width="200px" show-overflow-tooltip />
          <el-table-column label="应收类型" align="center" prop="proceedsType">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.finance_proceeds_type" :value="scope.row.proceedsType" />
            </template>
          </el-table-column>
          <el-table-column label="核销状态" align="center" prop="checkState">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.finance_proceeds_check_type" :value="scope.row.checkState" />
            </template>
          </el-table-column>
          <el-table-column label="应收时间" align="center" prop="repaymentTime" min-width="140px" show-overflow-tooltip />
          <el-table-column label="应收金额" align="center" prop="receivableAmount">
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.receivableAmount) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="已收金额" align="center" prop="receivedAmount">
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.receivedAmount) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="待收金额" align="center" prop="waitAmount">
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.waitAmount) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="期数" align="center" prop="periodsNum" />
          <el-table-column label="逾期天数" align="center" prop="overdueDay" />
          <el-table-column label="预警生成时间" align="center" prop="warningGenerationTime" min-width="140px" show-overflow-tooltip />
        </template>
      </table-page>
    </div>

    <!-- 添加或修改测试单表对话框 -->
    <el-dialog title="预警配置" :visible.sync="open" append-to-body class="form-dialog" width="35%">
      <div style="width: 90%; margin: 0 auto">
        <el-form ref="form" label-position="right" :model="form" label-width="100px" :rules="rules">
          <el-form-item label="预警配置:" prop="param">
            逾期超
            <el-input maxlength="9" @input="form.param = form.param.replace(/^0|[^0-9]/g, '')" v-model="form.param" style="width: 100px" placeholder="请输入预警配置天数"></el-input>
            天，推送预警数据
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitForm">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SearchContent from '@/components/SearchContent/index.vue'
import { gerCollectionWarningList, collectionConfig, saveCollectionConfig } from '@/api/collectionModule'

export default {
  name: 'CollectionWarning',
  components: {
    SearchContent,
  },
  dicts: ['collection_alert_status', 'business_type', 'customer_level', 'customer_source', 'finance_proceeds_type', 'finance_proceeds_check_type'],
  data() {
    return {
      rules: {
        param: [{ required: true, message: '请输入预警配置天数', trigger: 'change' }],
      },
      foreWarningTime: [],
      // 遮罩层
      loading: true,
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      dataList: [],
      // 表单参数
      form: { param: 30 },
      // 多选数组
      multipleSelection: [],
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 额度跳转
    goToDetail(calcSchemeId) {
      this._toPage({
        path: '/quota/ApplyDetails',
        query: {
          calcSchemeId,
        },
      })
    },
    // 订单详情
    orderDetail(row) {
      this._toPage({
        name: 'SuborderDetail',
        query: {
          id: row.orderCarId,
          orderCarCode: row.orderCarCode,
        },
      })
    },
    // 多选按钮
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 查看催收详情
    initiateCollectionView(row) {
      this._toPage({
        name: 'InitiateACollectionDetail',
        query: {
          type: 'detail',
          beFrom: 'CollectionWarning',
          id: row.id,
        },
      })
    },
    /** 预警配置 */
    warningConfiguration() {
      collectionConfig(1).then((res) => {
        console.log(res, '0-00-000-0')
        this.form = res.data[0]
      })
      this.open = true
    },
    /** 查询测试单表列表 */
    getList() {
      this.loading = true
      gerCollectionWarningList(this.queryParams).then((res) => {
        if (res.code == '200') {
          const { rows, total } = res
          this.dataList = rows
          this.total = total
          this.loading = false
        }
      })
    },
    // 清空校验
    clearCheck() {
      this.$refs['form'] && this.$refs['form'].clearValidate()
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.clearCheck()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.queryParams.startTime = this?.foreWarningTime[0]
      this.queryParams.endTime = this?.foreWarningTime[1]
      this.getList()
    },

    /** 重置按钮操作 */
    resetQuery() {
      ;(this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      }),
        (this.foreWarningTime = [])
      this.handleQuery()
    },
    /** 发起催收 */
    initiateCollection() {
      let ids = this.multipleSelection.map((item) => item.id).toString('')
      console.log(ids, 'ids')
      this._toPage({
        name: 'InitiateACollection',
        query: {
          type: 'add',
          beFrom: 'CollectionWarning',
          ids,
        },
      })
    },
    /** 提交按钮 */
    submitForm() {
      console.log(this.form)
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 调取接口
          saveCollectionConfig(this.form).then((res) => {
            this.$message.success('修改成功')
            this.open = false
          })
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.pagination-container {
  padding: 0 20px 50px !important;
}
.blue {
  color: #1890ff !important;
  cursor: pointer;
}
</style>
